<template>
  <!--执行页-案件批注-添加备注-组件 -->
  <section class="component add-case-remark">
    <el-form ref='form' :rules="rules" label-width="100px" :model="applyModel">
      <el-form-item label="批注内容" prop="content">
        <el-input type="textarea" :maxlength="500" v-model="applyModel.content"></el-input>
      </el-form-item>
    </el-form>
    <div class="confirm-button">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit" :loading="submitLoading">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Form } from 'element-ui';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop,Watch } from 'vue-property-decorator';
import { State, Getter, Action, namespace } from 'vuex-class';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import FileUpload from '~/components/common/file-upload.vue';

@Component({
  components: {
    FileUpload,
  }
})
export default class AddCaseRemark extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  private rules: any = {
    content: [{ required: true, message: '请输入备注内容' }],
  };
  private submitLoading: boolean = false;
  private applyModel: any = {
    content: '',
  };

  @Prop({ type: String, required: true })
  private caseId: string;
  @Prop({ })
  private modifyData: any;

  @Emit('close')
  private close() {
    const form: any = this.$refs['form'];
    form.resetFields();
  }

  @Watch('modifyData', { immediate: true })
  private modifyDataChange(){
    this.applyModel.content = this.modifyData.content
  }
  private commit() {
    const form: any = this.$refs['form'];
    form.validate((result) => {
      if (!result) return;
      this.submitLoading = true;
        this.caseOperatorPageService.addCaseRemark({
          caseId: this.caseId,
          content: this.applyModel.content,
          id:this.modifyData.id
        }).subscribe(
          (data) => {
            this.submitLoading = false;
            this.modifyData.id?this.$message.success('修改批注成功'):this.$message.success("添加批注成功");
            this.close();
          },
          (err) => {
            this.submitLoading = false;
          },
        );
    });
  }
}
</script>

<style scoped lang="less">
</style>
